Array.prototype.shuffle = function(){ 
	var srcArr = this,
		targetArr = [],
		i, length, item, randex, targetLastIndex, switchItem;
	for(i = 0, length = srcArr.length; i < length; i++){ 
		item = srcArr[i];
		targetLastIndex = targetArr.length;
		randex = random(targetLastIndex);
		switchItem = targetArr[randex];
		targetArr[randex] = item;
		typeof switchItem !== 'undefined' && (targetArr[targetLastIndex] = switchItem);
	}
	return targetArr;
}
var canvas = Snap('#canvas');
var quiz = $('.quiz');
var ready = $('.ready');
var result = $('.result');
var pass = 0;
var pointer = 0;
var data;
var timeHandle = null;
var interval = 1000;
var maxtime = 25;
var currenttime = 0;

var distance = function(x1, y1, x2, y2){ 
	return Math.floor(Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 -y2, 2)));
};

var initialData = function(){
	data = quizData.shuffle().slice(0, 5);
	pass = 0;
	pointer = 0;
};

var doSuccess = function(){
	canvas.clear();
	clearClock();
	quiz.hide();
	ready.hide();
	result.removeClass('lose')
		.addClass('win')
		.show();
};

var doFailed = function(){
	canvas.clear();
	clearClock();
	quiz.hide();
	ready.hide();
	result.removeClass('win')
		.addClass('lose')
		.show();
};

var setClock = function(){
	var remaintime = maxtime - currenttime;
	$('#cd').text(remaintime);
	if(currenttime < maxtime){
		timeHandle = setTimeout(setClock, interval);	
	}else{
		if(isAllright()){
			pass++;
		}
		if(pass > 2){
			doSuccess();	
		}else{
			render();	
		}
	}
	currenttime++;

};

var clearClock = function(){
	if(timeHandle){
		clearTimeout(timeHandle);
		timeHandle = null;
	}	
	currenttime = 0;
};

var render = function(){
	if(pointer - pass > 2 || pointer > 4){
		doFailed();
		return
	}
	clearClock();
	$('.q-description').text(data[pointer]['des']);
	$('#sum').text(pointer + 1);
	$('#pass').text(pass);
	var items = data[pointer].quiz;
	var answers = items.shuffle();
	$('.list-wrap').html(template('tpl', {items:items, answers:answers}));
	canvas.clear();
	pointer++;
	setClock();
};

var quizClean = function(){ 
	canvas.clear();
	$('.item').each(function(){ 
		$(this).removeAttr('connect-to');
	});
};

var random = function(min, max){ 
		if(typeof max === 'undefined'){ 
			max = min;
			min = 0;
		}
		return Math.floor(min + (max - min)*Math.random());
};

var isAllright = function(){ 
	var r = true;
	$('.item').each(function(){ 
		if($(this).attr('uid') !== $(this).attr('connect-to')){ 
			r = false;
		}
	});
	return r;
};

$(document.documentElement).on('tap','.item', function(){ 
	var self = $(this);
	if(self.attr('connect-to')){ 
		return
	}
	if($('.item.active').length == 0){ 
		self.addClass('active');
		return
	}
	var lactive = $('.item.active');
	if(lactive.attr('role') == self.attr('role')){ 
		lactive.removeClass('active');
		self.addClass('active');
		return
	}
	var disk1 = lactive.next('.disk').length > 0 ? lactive.next('.disk') : lactive.prev('.disk');
	var disk2 = self.next('.disk').length > 0 ? self.next('.disk') : self.prev('.disk');
	var p1 = disk1.offset();
	var p2 = disk2.offset();
	var d = distance(p1.left, p1.top, p2.left, p2.top);

	canvas.line(p2.left, p2.top, p1.left, p1.top)
			.attr({ 
				strokeDasharray: d,
				strokeDashoffset: -d
			})
			.animate({ 
				strokeDashoffset: 0
			}, 200);
	lactive.removeClass('active').attr('connect-to', self.attr('uid'));
	self.attr('connect-to', lactive.attr('uid'));
	if($('.item').length == $('[connect-to]').length){
		clearClock();	
	}
});

$('.quiz-begin').on('tap', function(){
	initialData();
	render();

	ready.hide();
	result.hide();
	quiz.show();
});

$('.nextquiz').on('tap', function(){
	if(isAllright()){
		pass++;
	}
	if(pass > 2){
		doSuccess();
		return
	}
	if(pointer - pass > 2 || pointer > 4){
		doFailed();
		return
	}
	render();
});

$('.restart').on('tap', function(){
	result.hide();
	quiz.hide();
	ready.show();
});
